<!--
    我的讨论
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 我的讨论
        div.title
          span(v-for="(item, index) in collect" @click="isName(item,index)" :class="index === isIndex?'Greens':''").question {{item.title}}
        div(v-if="this.isIndex === 0").discussBox
          div.head
            img(src="/static/myDiscuss/u1242.png")
          div.comment
            div.commentUser
              span.userName 用户名
              span.date 04-05
              span.date 15:00
            p.theme 讨论主题
            div.commentBot
              div.like
                img(src="/static/OpenPage/u1158.png")
                span 0
              div.discuss
                img(src="/static/OpenPage/u1154.png")
                span 0
              el-input(v-model="input" placeholder="我也说一句...")
            div.writeBack
              div.head
                img(src="/static/myDiscuss/u1242.png")
              div.comment
                div.commentUser
                  span.userName 用户名
                  span.date 04-05
                  span.date 15:00
                p.theme 讨论主题
                div.commentBot
                  div.like
                    img(src="/static/OpenPage/u1158.png")
                    span 0
                  div.discuss
                    img(src="/static/OpenPage/u1154.png")
                    span 0
                  el-input(v-model="input" placeholder="我也说一句...")
              div.clearfix
              div.reply
                span 查看更多回复
                span 收起回复
    div.clearfix
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'MyDiscussion',
    data() {
      return {
        collect: [
          {title: '我参与的讨论'},
          {title: '我创建的讨论'}
        ],
        isIndex: 0,
        input: ''
      }
    },
    methods: {
      isName(item, index) {
        this.isIndex = index
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 5px auto

  h1
    font-size 20px
    color #FF9933
    margin-bottom 36px

  .boxRight
    width 926px
    height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box
    .title
      margin-bottom 20px

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933 !important
    .text
      color #666666
      font-size 18px

  .question
    font-size 18px
    margin-right 50px
    cursor pointer

  .Greens
    color #0099FF

  .discussBox
    width 880px

  .head
    float left
    width 56px
    img
      width 56px
      height 56px
  .comment
    float right
    width 90%

  .commentUser
    span
      margin-right 22px
    .date
      color #999
    .userName
      font-size 18px
  .theme
    font-size 17px
    font-weight 700
    margin 30px 0

  .like
    display inline-block
    width 50px
    height 25px
    span
      display inline-block
      width 25px
      height 25px
      line-height 25px
      text-align center
      color #999

  .discuss
    display inline-block
    width 50px
    height 25px
    span
      display inline-block
      width 25px
      height 25px
      line-height 25px
      text-align center
      color #999

  .writeBack
    padding 22px
    background-color #FFF5EB

  .reply
    span
      color #FF9933
      font-size 14px
      margin-right 26px

</style>
<style lang="stylus" rel="stylesheet/stylus">
  .commentBot
    .el-input__inner
      height 30px
      margin 12px 0
</style>
